<style>
    button {
        display: inline-block;
        font-weight: bold;
    }

    #gridContainer {
        height: 100%;
        width: 47%;
        display: block;
    }

    #csvResult {
        box-sizing: border-box;
        height: 100%;
        width: 47%;
        margin-left: 5%;
        position: absolute;
        top: 0;
        right: 0;
    }
</style>

<div style="display: flex; flex-direction: column; height: 100%;">
    <div style="display: flex;">
        <div class="row">
            <label for="allColumns"><input id="allColumns" type="checkbox"/>All Columns</label>
        </div>
    </div>
    <div style="margin: 10px 0;">
        <button onclick="onBtnUpdate()">Show CSV export content text</button>
        <button onclick="onBtnExport()">Download CSV export file</button>
    </div>
    <div style="flex: 1 1 0px; position: relative;">
        <div id="gridContainer">
            <div id="myGrid" style="width:100%;height: 100%;display: block;" class="ag-theme-quartz"></div>
        </div>
        <textarea id="csvResult" placeholder="Click the Show CSV export content button to view exported CSV here"></textarea>
    </div>
</div>

